<div class="user-content">
    <div class="user-information">
        <div class="user-container">
            <div class="user-title">
                <span></span>
                用户信息
            </div>
            <ion-row>
                <ion-col col-12>
                    <i class="iconfont icon-phone"></i>
                    <div>
                        <span>电话:</span>
                        <span>{{ UserObj?.mobile }}</span>
                    </div>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col col-12>
                    <i class="iconfont icon-companyinfo"></i>
                    <div>
                        <span>地址:</span>
                        <span>{{ UserObj?.address }}</span>
                    </div>
                    
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-col col-12>
                    <i class="iconfont icon-icon-test"></i>
                    <div class="user-arreas">
                        <span>台区:</span>
                        <span>{{ areaName }}</span>
                    </div>
                </ion-col>
            </ion-row>
            <ion-row class="user-number">
                <ion-col col-12>
                    <div class="arreas-text-title">
                        <span>抄表册号:</span>
                        <span>{{ UserObj?.districtId }}</span>
                    </div>
                </ion-col>
            </ion-row>
            <ion-row class="user-number">
                <ion-col col-12>
                    <div class="arreas-text-title">
                        <span>用户编号:</span>
                        <span>{{ UserObj?.id }}</span>
                    </div>
                </ion-col>
            </ion-row>
            <ion-row class="user-number">
                <ion-col col-12>
                    <div class="arreas-text-title">
                        <span>资产编号:</span>
                        <span>{{ UserObj?.propertyNo }}</span>
                    </div>
                </ion-col>
            </ion-row>
        </div>
    </div>
    <div class="arrears-item">
        <div class="arrears-title">
            <i class="iconfont icon-ic_payreceipt"></i>
            <span>欠费明细</span>
        </div>
        <ion-row class="list-content list-title">
            <ion-col col-2>月份</ion-col>
            <ion-col col-2>业务类别</ion-col>
            <ion-col col-2>电价</ion-col>
            <ion-col col-2>欠费总额</ion-col>
            <ion-col col-2>欠电费</ion-col>
            <ion-col col-2>抄表信息</ion-col>
        </ion-row>
        <div class="arrears-list" *ngFor="let item of billList?.arrears , let i = index">
            <ion-row class="list-content arrears-data">
                <ion-col col-2>{{ item.month }}</ion-col>
                <ion-col col-2>{{ item.businessType }}</ion-col>
                <ion-col col-2>{{ item.powerUnit }}</ion-col>
                <ion-col col-2 (click)="seeArrearsTotal(i)">{{ item.itemarrearsTotal }} <i class="iconfont icon-down-copy" *ngIf="!isTotal[i]"></i> <i class="iconfont icon-down" *ngIf="isTotal[i]"></i></ion-col>
                <ion-col col-2>{{ item.arrearsFee }}</ion-col>
                <ion-col col-2 (click)="seeReadInfo(i)">查看 <i class="iconfont icon-down-copy" *ngIf="!isRead[i]"></i> <i class="iconfont icon-down" *ngIf="isRead[i]"></i></ion-col>
            </ion-row>
            <div class="table total-arrears" *ngIf="!isTotal[i]">
                <ion-row>
                    <ion-col col-3>应收违约金</ion-col>
                    <ion-col col-2>欠电度电费</ion-col>
                    <ion-col col-2>欠基本电费</ion-col>
                    <ion-col col-2>欠力调电费</ion-col>
                    <ion-col col-3>欠附加费</ion-col>
                </ion-row>
                <ion-row>
                    <ion-col col-3>{{ item.penalty }}</ion-col>
                    <ion-col col-2>{{ item.arrearsElectricity }}</ion-col>
                    <ion-col col-2>{{ item.arrearsBasicFee }}</ion-col>
                    <ion-col col-2>{{ item.arrearsAdjustFee }}</ion-col>
                    <ion-col col-3>{{ item.arrearsAdditionalFee }}</ion-col>
                </ion-row>
            </div>
            <div class="table meter-reading-information" *ngIf="!isRead[i]">
                <ion-row>
                    <ion-col col-3>上次表示数</ion-col>
                    <ion-col col-3>本次表示数</ion-col>
                    <ion-col col-3>表示数差额</ion-col>
                    <ion-col col-3>综合倍率</ion-col>
                </ion-row>
                <ion-row *ngFor="let list of billList?.arrears?.electricityList">
                    <ion-col col-3>{{ list.lastTableNum }}</ion-col>
                    <ion-col col-3>{{ list.theTableNum }}</ion-col>
                    <ion-col col-3>{{ list.tableNumDifference }}</ion-col>
                    <ion-col col-3>{{ list.comprehensiveRate }}</ion-col>
                </ion-row>
            </div>
            
        </div>
        
    </div>

    <div class="user-feature">
        <div class="arrears-title">
            <i class="iconfont icon-mine_before"></i>
            <span>用户特征</span>
        </div>
        <div class="feature-list">
            <ion-row>
                <ion-col col-3 *ngFor="let list of features">{{list.markName}}</ion-col>
            </ion-row>
        </div>
        <span class="feature-modify" (click)="selectUserFeature()">
            <i class="iconfont icon-bianji"></i>
        </span>
    </div>

    <div class="payment-record">
        <div class="title">
            <span></span>
            缴费历史
        </div>
        <ion-row class="arrears-num">
            <ion-col>最近6个月</ion-col>
            <ion-col>欠费: {{ billList?.arrears?.arrearsNum || '0' }} 次</ion-col>
        </ion-row>
        <div class="record-item">
            <ion-row class="item-title title-back">
                <ion-col col-2>缴费年月</ion-col>
                <ion-col col-3>实缴时间</ion-col>
                <ion-col col-2>实收电费</ion-col>
                <ion-col col-2>实收电量</ion-col>
                <ion-col col-3>更多信息</ion-col>
            </ion-row>
            <div class="payment-list" *ngFor="let item of billList?.payments; let i = index">
                <ion-row class="item-title">
                    <ion-col col-2>{{ item.payMonth }}</ion-col>
                    <ion-col col-3>{{ item.payDate | date: 'yyyy-MM-dd HH:mm:ss' }}</ion-col>
                    <ion-col col-2>{{ item.actualFee }}</ion-col>
                    <ion-col col-2>{{ item.actualElectricity }}</ion-col>
                    <ion-col col-3 (click)="seeMore(i)">查看 <i class="iconfont icon-down-copy" *ngIf="!isMore[i]"></i><i class="iconfont icon-down" *ngIf="isMore[i]"></i></ion-col>
                </ion-row>
                <div class="record-list" *ngIf="!isMore[i]">
                    <ion-row>
                        <ion-col col-3>交易方式</ion-col>
                        <ion-col col-3>资金类型</ion-col>
                        <ion-col col-3>实收总额</ion-col>
                        <ion-col col-3>实收违约金</ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-3>{{ item.businessMethod }}</ion-col>
                        <ion-col col-3>{{ item.feeType }}</ion-col>
                        <ion-col col-3>{{ item.actualTotal }}</ion-col>
                        <ion-col col-3>{{ item.actualPenalty }}</ion-col>
                        
                    </ion-row>
                    <ion-row>
                        <ion-col col-3>实收金额</ion-col>
                        <ion-col col-3>实收预收</ion-col>
                        <ion-col col-3>电价</ion-col>
                        <ion-col col-3>业务类别</ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col col-3>{{ item.actualMoney }}</ion-col>
                        <ion-col col-3>{{ item.actualEarn }}</ion-col>
                        <ion-col col-3>{{ item.powerUnit }}</ion-col>
                        <ion-col col-3>{{ item.businessType }}</ion-col>
                    </ion-row>
                </div>
            </div>
        </div>
    </div>
</div>